<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
        }

        .pyro {
            display: none;
        }
        #happy {
            display: none;
        }
    </style>
</head>

<body style="justify-content: center;align-items: center;display: flex;">
    <div style="color: skyblue;height: 30px;width: 300px;border: 1px solid red;text-align: center; line-height: 30px;"
        class="container">
        <span style="float:left;">离放假还有</span>
        <div id="settimes"></div>
        <div id="happy">放假了</div>
        <div class="pyro">
            <div class="before"></div>
            <div class="after"></div>
        </div>
    </div>


    <script type="text/javascript">
        const SS = document.getElementById('settimes')
        const DD = document.querySelector('.container')
        const NN = document.querySelector('#happy')
        const HH = document.querySelector('.pyro')
        function newTimes() {
            let newsTime = new Date('2022/01/26,00:00:00');
            let nowTimes = new Date();
            let diffTimes = parseInt((newsTime.getTime() - nowTimes.getTime()) / 1000);
            let d = parseInt(diffTimes / (24 * 60 * 60));
            let h = parseInt(diffTimes / (60 * 60) % 24);
            let m = parseInt(diffTimes / 60 % 60);
            let s = parseInt(diffTimes % 60);

            SS.innerHTML = d + "天" + h + "时" + m + "分" + s + "秒"
            if (diffTimes <= 0) {
                DD.removeChild(SS)
                NN.style.display = 'block'
                HH.style.display = 'block'
            }
        }
        newTimes();
        let s = setInterval(newTimes, 1000)
        clearInterval();
    </script>
</body>

</html>